<template>
  <div>
    <van-nav-bar
      title="个人信息"
      left-arrow
      left-text="返回"
      @click-left="Order"
    >
    </van-nav-bar>
    <div class="portrait" v-for="(item, index) in userList" :key="index">
      <span>
        <img :src="item.pic" />
      </span>
      <span style="text-align: center">{{ item.name }}</span>
    </div>
    <div class="van-hairline--bottom" style="margin-top: 20px"></div>
    <van-button
      style="width: 150px; margin-left: 35%"
      round
      type="info"
      @click="Order"
      >保存</van-button
    >
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      userList: [],
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    Order() {
      this.$router.go(-1);
    },
    getData() {
      axios({
        url: "http://127.0.0.1:3000/users/info",
        method: "get",
      }).then((res) => {
        this.userList = res.data;
        console.log(this.userList);
      });
    },
  },
};
</script>

<style lang='scss' scope>
.portrait {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 150px;
}

.portrait img {
  width: 100px;
  height: 100px;
  margin-top: 15px;
  border-radius: 50%;
}
</style>